<template>
  <view class="container">
    <view class="day">
      {{ details.recordDate }}
    </view>
    <view class="list">
      <view v-for="item in details.tasks" :key="item.taskId" class="task-item">
        <view class="col-l">
          {{ item.taskTitle }}
        </view>
        <view class="col-r" :class="item.status === TaskStatus.Complete && 'active'">
          {{ item.status === TaskStatus.Complete ? '已完成' : '未完成' }}
        </view>
      </view>
    </view>
    <view class="empty-container" />
  </view>
</template>

<script lang="ts" setup>
import type { IDailyTask } from '@/api/task'
import { TaskStatus } from '@/api/task'

definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  // type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '任务详情',
    backgroundColor: '#fafafa',
  },
})

const details = ref<IDailyTask>({} as IDailyTask)
// #region Props
// #endregion
// #region Emits
// #endregion
// #region Hooks
// #endregion
// #region Computed
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
// #endregion
// #region Life Cycle
onLoad((options) => {
  const data = JSON.parse(decodeURIComponent(options.params))
  if (data) {
    details.value = data
  }
})
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background: var(--bg-color);
  overflow-y: scroll;
  .day {
    margin: 20px 10px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
  }
  .task-item {
    background: var(--card-border-color);
    padding: 20px 10px;
    font-size: 16px;
    border-bottom: 1px solid var(--checkbox-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .col-l {
      flex: 1 0 auto;
      width: 50%;
      font-size: 14px;
    }
    .col-r {
      color: rgba(0, 0, 0, 0.5);
      font-size: 14px;
      &.active {
        color: var(--main-light-color);
      }
    }
  }
  .empty-container {
    height: env(safe-area-inset-bottom);
  }
}
</style>
